<template>
	<view class="uni_box">
		<!-- 顶部兼容组件APP端 -->

		<view class="newcontent">
			<Nheader></Nheader>

			<!-- 轮播图 -->
			<view class="lun">
				<u-swiper :list="lunlist" :effect3d="true" bg-color="#fff" height="320" effect3d-previous-margin="60"
					@click="swclick"></u-swiper>
			</view>
			<!-- 分类 -->
			<view class="flei" v-if="ClassList!=''">
				<classifiy :ClassList="ClassList"></classifiy>
			</view>
			<!-- 分享-直播课堂-->
			<view class="ketan plr">
				<view class="nbiao">
					<image src="/static/home/zhibo.png" class="zhiboicon" mode=""></image>
					<text class="ftit">分享·融跃</text>
				</view>
				<view class="nbtwo" v-if="zhibolist">
					<image src="/static/home/icons.png" class="icons" mode=""></image>
					<text class="zhitit">直播课堂</text>
					<image src="/static/home/iconstwo.png" class="icons" mode=""></image>
				</view>
				<view class="neitwo" v-if="zhibolist">
					<swiper class="swiper" style="height: 220px;" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
						:duration="duration" :current="swcurrent" @change="swchange" next-margin="30px">
						<swiper-item class="swiperitem" v-for="(item, index) in zhibolist" :key="index" @click="zhilistClick(item)">
							<view class="sview">
								<text class="sjian">{{item.time}}</text>
								<view class="rbiao">
									<image src="/static/home/leis.png" class="leis" mode=""></image>
									<view class="rbview">
										{{item.cate_name}}
									</view>
								</view>
								<text class="rbati">{{item.title}}</text>
								<view class="lunone">
									<image class="jtou" :src="item.teacher_image" />
									<view class="jiright">
										<text class="jiname">{{item.teacher_name}}</text>
									</view>
								</view>
								<view class="lunwen">
									<view class="hui" v-if="item.button_text">{{item.button_text}}</view>
									<text class="mfei" v-if="item.free_text">{{item.free_text}}</text>
								</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view class="cahzhibo" @click="getprohome">
					查看更多直播
				</view>
			</view>
			<!-- 体验课堂 -->
			<view class="ketan plr">
				<view class="nbtwo">
					<image src="/static/home/icons.png" class="icons" mode=""></image>
					<text class="zhitit">体验课堂</text>
					<image src="/static/home/iconstwo.png" class="icons" mode=""></image>
				</view>

				<view class="tabview">
					<u-tabs :list="tiyanlist" :is-scroll="true" :current="tiyantabcurrent" @change="tiyantabchange"
						active-color="#FA7938" inactive-color="#CCCCCC"></u-tabs>
				</view>
				<view class="tilist">
					<view class="tiitem" v-for="(item,index) in tiyandata" :key="index" @click="getToDetail(item,1)">
						<image :src="item.image" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">{{item.title}}</text>
							<text class="timiao">{{item.subtitle}}</text>
							<view class="linview">
								<view class="liji" v-if="item.button_text">{{item.button_text}}</view>
								<text class="mian" v-if="item.free_text">{{item.free_text}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cahzhibo" @click="getmore(1)">
					更多{{tiyaninfo.name}}试学
				</view>
			</view>

			<!-- 学习-融跃 -->
			<view class="ketan plr yin">
				<view class="nbiao">
					<image src="/static/home/zhibo.png" class="zhiboicon" mode=""></image>
					<text class="ftit">学习·融跃</text>
				</view>

				<view class="tabview" style="margin-top: 20rpx;">
					<u-tabs :list="xuexilist" :is-scroll="true" :current="xuexitabcurrent" @change="xuexitabchange"
						active-color="#FA4E4E" inactive-color="#CCCCCC" bg-color="#F6F7FB"></u-tabs>
				</view>
				<view class="tilist-xue">
					<view class="tiitem" v-for="(item,index) in xuexidata" :key="index" @click="getToDetail(item,2)">
						<image :src="item.image" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao">{{item.title}}</text>
							<view class="linview">
								<text class="jine">¥<text class="jinnum">{{item.price}}</text></text>
								<text class="mian">{{item.buy_nums}}人已购买</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cahzhibo" @click="getmore(2)">
					更多{{xuexiinfo.name}}课程
				</view>

				<view class="nbtwo">
					<image src="/static/home/icons.png" class="icons" mode=""></image>
					<text class="zhitit">图书教材</text>
					<image src="/static/home/iconstwo.png" class="icons" mode=""></image>
				</view>

				<view class="tabview">
					<u-tabs :list="tushulist" :is-scroll="true" :current="tushutabcurrent" @change="tushutabchange"
						active-color="#FA7938" inactive-color="#CCCCCC" bg-color="#F6F7FB"></u-tabs>
				</view>
				<view class="tilist-jiaocai">
					<view class="tiitem-two" v-for="(item,index) in tushudata" :key="index" @click="getToDetail(item,3)">
						<image :src="item.image" class="itemimg" mode=""></image>
						<view class="itembot">
							<text class="tbiao txt">{{item.title}}</text>
							<text class="timiao">{{item.subtitle}}</text>
							<view class="linview">
								<text class="jine">¥<text class="jinnum">{{ item.price }}</text></text>
								<text class="mian">{{item.tag}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="cahzhibo" @click="getmore(3)">
					更多{{tushuinfo.name}}图书教材
				</view>
			</view>

			<!-- 资讯-融跃 -->
			<view class="ketan plr">
				<view class="nbiao">
					<image src="/static/home/zixun.png" class="zhiboicon" mode="" style="width: 36rpx;height: 38rpx;"></image>
					<text class="ftit">资讯·融跃</text>
				</view>
				<view class="kaoview">
					<view class="kaoleft" :class="zixunheadinfo.id==item.id?'kactive':''" v-for="(item,index) in zixunhead" :key="index" @click="ziClick(item)">{{item.name}}</view>
					
				</view>
				<view class="tabview" style="margin-top: 20rpx;">
					<u-tabs :list="zixunlist" :is-scroll="true" :current="zixuntabcurrent" @change="zixuntabchange"
						active-color="#FA4E4E" inactive-color="#CCCCCC"></u-tabs>
				</view>
				<view class="tilist-kao">
					<view class="kaoitem" v-for="(item,index) in zixundata" :key="index" @click="getToDetail(item,4)">
						<view class="kaoleft">
							<text class="kaotit">{{ item.title }}</text>
							<view class="kaobot">
								<view class="kaoqi">
									<image src="/static/home/zsj.png" class="ticon" mode=""></image>
									<text class="sjians">{{item.time}}</text>
								</view>
								<view class="kaoqi">
									<image src="/static/home/zyl.png" class="ticon" mode="" style="height: 15rpx;width: 20rpx;"></image>
									<text class="sjians">{{item.views}}</text>
								</view>
							</view>
						</view>
						<image :src="item.image" class="itemimg" mode=""></image>
					</view>
				</view>
				<view class="cahzhibo" @click="getmore(4)">
					更多{{zixuninfo.name}}资讯
				</view>
			</view>

			<!-- 实力-融跃 -->
			<view class="ketan">
				<view class="nbiao plr">
					<image src="/static/home/ren.png" class="zhiboicon" mode="" style="width: 38rpx;height: 34rpx;"></image>
					<text class="ftit">实力·融跃</text>
				</view>
				<view class="shiliview">
					<swiper class="swiper-block-shili" :interval="3000" :duration="1000" @change="swiperChange"
						previous-margin='90rpx' next-margin='90rpx' :indicator-dots="false">
						<swiper-item v-for="(item, index) in shizidata" :key="index" class="swiper-item-shili"
							@click="previewImage(index, item)">
							<!-- <image :src="item"  :class="['slide-image', currentIndex === index?'active':'']" mode="aspectFill" ></image> -->
							<view class="skaoview" :class="['slide-image', currentIndex === index?'active':'']">
								<image :src="item.image" class="kaooneimg" mode=""></image>
								<view class="jinpai">
									<text class="jinname">{{item.name}}</text>
									<view class="bqian" v-if="item.tag">
										<text class="qianitem" v-for="(i,ind) in item.tag" :key="ind">{{i}}</text>
									</view>
									<view class="duiview" v-for="(i,ind) in item.honor_tags" :key="ind">
										<image src="/static/home/kaodui.png" class="kaodui" mode="" style="width: 24rpx;height: 17rpx;margin-right: 8rpx;"></image>
										<text>{{i}}</text>
									</view>
									<!-- <u-parse style="color: #666;margin-top: 20rpx;font-size: 25rpx;" :html="item.content" v-if="item.content"></u-parse> -->
								</view>
							</view>
						</swiper-item>
					</swiper>

				</view>
			</view>

			<!-- 发展-融跃 -->
			<!-- plr -->
			<view class="ketan">
				<view class="nbiao plr">
					<image src="/static/home/zixun.png" class="zhiboicon" mode="" style="width: 36rpx;height: 38rpx;"></image>
					<text class="ftit">发展·融跃</text>
				</view>
				<view class="kaoview">
					<view class="kaoleft " :class="ishe==1?'kactive':''" @click="heClick(1)">融跃合作</view>
					<view class="kaoleft" :class="ishe==2?'kactive':''" @click="heClick(2)">融跃发展</view>
				</view>
				<view class="xie plr" v-if="ishe == 1">
					<text>携手国内外知名机构，全面打造
						国际型教育品牌</text>
				</view>

				<view class="pinlist plr" v-if="ishe == 1">
					<view class="pinitem" v-for="(item,index) in helist" :key="index">
						<image :src="item.image" class="Kaplan_logo" mode="widthFix"></image>
					</view>
				</view>
				<view class="faview">
					<view class="" style="margin-top: 20rpx;">
						<u-tabs :list="falist" :is-scroll="true" :current="fatabcurrent" @change="fatabchange"
							active-color="#FA4E4E" inactive-color="#CCCCCC"></u-tabs>
					</view>
					<view class="fatu">
						<view class="faitem">
							<image
								:src="falistimg"
								mode=""
								class="fatuimg"
							/>
							<view class="fabot">
								<swiper class="swiper" style="height: 220rpx;" :current="swcurrent" @change="swchangetwo">
									<swiper-item class="swiperitem" v-for="(item, index) in fainfo" :key="index">
										<view class="sview">
											<text class="bname">{{ item.name }}</text>
											<view class="ditem">
												<image src="/static/home/din.png" class="dicon" mode=""></image>
												<text class="tdizhi">{{item.address}}</text>
											</view>
											<view class="ditem">
												<image src="/static/home/phone.png" class="dicon" mode=""></image>
												<text class="tdizhi">{{item.mobile}}</text>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>
						</view>

					</view>
				</view>
			</view>

			<!-- 底部导航组件 -->
			<Botnavigation></Botnavigation>

			<!-- 底部导航 -->
			<Tabbar :current="0"></Tabbar>


			<!-- 预约弹窗 -->
			<view class="st">
				<u-popup v-model="yueshow" mode="center" @close="yueshow=false" width="80%" :closeable="true">
					<view class="stpop">
						<!-- <view class="chaview">
							<image class="macha" src="@/pages_subject/static/img/macha.png" mode="" />
						</view> -->
						<image class="mapop" mode="widthFix" :src="taninfo.image" />
						<!-- <text class="matit">注：{{taninfo.title}}</text> -->
					</view>
				</u-popup>
			</view>
		</view>
	</view>
</template>

<script>
	import classifiy from '@/components/classifiy/classifiy'
	import {
		loginLive
	} from "@/utils/liveApp.js";
	export default {
		data() {
			return {
				lunlist: [
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
					// 	title: '昨夜星辰昨夜风，画楼西畔桂堂东'
					// },
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/2.jpg',
					// 	title: '身无彩凤双飞翼，心有灵犀一点通'
					// },
					// {
					// 	image: 'https://cdn.uviewui.com/uview/swiper/3.jpg',
					// 	title: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					// }
				],
				ClassList: [
					// {
					// 		id:  4,
					// 		name:  "生活",
					// 		icon:  [
					// 				{
					// 						name:  "省钱话费",
					// 				},
					// 				{
					// 						name:  "省钱话费",
					// 				},
					// 				{
					// 						name:  "省钱话费",
					// 				},
					// 				{
					// 						name:  "省钱话费",
					// 				},
					// 				{
					// 						name:  "省钱话费",
					// 				}
					// 	]
					// }
				],
				indicatorDots: false,
				autoplay: true,
				interval: 5000,
				duration: 1500,
				swcurrent: 0,
				count: 5,
				pinlist: [{
						avatar: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						nickname: '测试昵称',
						content: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						nickname: '测试昵称',
						content: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					},
					{
						avatar: 'https://cdn.uviewui.com/uview/swiper/1.jpg',
						nickname: '测试昵称',
						content: '谁念西风独自凉，萧萧黄叶闭疏窗，沉思往事立残阳'
					}
				],
				tablist: [{
					name: 'CFA'
				}, {
					name: 'FRM'
				}, {
					name: 'ACCA'
				}, {
					name: 'CPA'
				}, {
					name: 'CFA'
				}, {
					name: 'FRM'
				}, {
					name: 'ACCA'
				}, {
					name: 'CPA'
				}],
				tabcurrent: 0,
				currentIndex: 0,
				posterData: [
					'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
					'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
					'https://dywifi.oss-cn-hangzhou.aliyuncs.com/qrcode/4/073121/1f6959827c20ca0376c83f44f1d1e4ac.png',
				],
				zixuninfo: {

				},
				zixunlist: [],
				zixundata: [], //咨询数据
				zixuntabcurrent: 0,

				tushulist: [], //图书列表
				tushuinfo: {},
				tushutabcurrent: 0,
				tushudata: [],

				xuexilist: [], //学习融跃
				xuexiinfo: {},
				xuexitabcurrent: 0,
				xuexidata: [],

				tiyanlist: [], //体验课程
				tiyaninfo: {},
				tiyantabcurrent: 0,
				tiyandata: [],

				zhibolist: [], //直播课堂
				taninfo: {
					image: '',
					title: ''
				},
				yueshow: false,

				zixunhead:[],
				zixunheadinfo:[],
				shizidata:[],
				helist:[],
				ishe:2,//1融跃合作 2融跃发展
				falist:[],
				falistimg:'',
				fainfo:[],
				fatabcurrent:0
			}
		},
		components: {
			classifiy
		},
		computed: {},

		mounted() {

		},
		async onLoad() {
			uni.setStorageSync('shopId', '1')
			uni.hideTabBar({
				animation: false, // 是否需要动画效果
				success: function() {},
				fail: function(err) {}
			});
		},
		created() {
			this.getinit()
			uni.hideTabBar({
				animation: false, // 是否需要动画效果
				success: function() {},
				fail: function(err) {}
			});

		},
		async onShow() {
			this.getinit()
		},
		onReachBottom: function() {},
		methods: {
			getinit() {
				this.CateList()
				// this.fgetCate();//分类
				this.fgetZhiboList(); //直播课程
				this.fgetBanner(); //轮播图
				this.fgetMenu(); //金刚区
				this.getshizi();//师资
				this.fgetFriendList();//融跃合作
				this.fgetSiteList();//融跃发展
				// this.fgetMenuFoot();//底部
			},
			async CateList() {
				let res = await this.$u.api.getCate({});
				this.zixunlist = res
				this.tushulist = res
				this.xuexilist = res
				this.tiyanlist = res
				if (res) {
					//咨询
					this.zixuninfo = res[0]
					this.fzixunhead();//资讯标题数组
					
					// 图书
					this.tushuinfo = res[0]
					this.gettushu();
					// 学习
					this.xuexiinfo = res[0]
					this.getxuexi();
					// 体验课程
					this.tiyaninfo = res[0]
					this.gettiyan();
				}
			},
			async fgetMenu() { //金刚区
				let res = await this.$u.api.getMenu({});
				this.ClassList = res
				// console.log(this.ClassList)
			},
			async fgetZhiboList() { //直播课程
				let res = await this.$u.api.getZhiboList({});
				this.zhibolist = res
			},
			async getzixun() {
				let res = await this.$u.api.getNewsList({
					cate: this.zixuninfo.id,
					type: this.zixunheadinfo.id
				});
				this.zixundata = res
			},
			async gettushu() {
				let res = await this.$u.api.getBookList({
					cate: this.tushuinfo.id
				});
				this.tushudata = res
			},
			async getxuexi() {
				let res = await this.$u.api.getStudyList({
					cate: this.xuexiinfo.id
				});
				this.xuexidata = res
			},
			async gettiyan() {
				let res = await this.$u.api.getTiyanList({
					cate: this.tiyaninfo.id
				});
				this.tiyandata = res
			},
			async fgetBanner() {
				let res = await this.$u.api.getBanner({
					mark: 'h5-index'
				});
				this.lunlist = res
			},
			async fzixunhead(){
				let res = await this.$u.api.getNewsType({
					
				});
				this.zixunhead = res
				this.zixunheadinfo = res[0]
				this.getzixun();
			},
			ziClick(item){
				this.zixunheadinfo = item
				this.getzixun();
			},

			swchange(e) {
				// console.log(e)
			},
			tabchange(e) {
				this.tabcurrent = e
			},
			swiperChange(event) {
				console.log(event)
				this.currentIndex = event.detail.current
				this.currentPoster = this.posterData.poster[this.currentIndex]
				// console.log(this.currentPoster)
			},
			previewImage(index, url) {
				console.log('index', index)
				uni.previewImage({
					current: index, //预览图片的下标
					urls: this.posterData.poster //预览图片的地址，必须要数组形式，如果不是数组形式就转换成数组形式就可以
				})
			},
			zixuntabchange(e) {
				this.zixuntabcurrent = e
				let zixunlist = this.zixunlist
				this.zixuninfo = zixunlist[e]
				this.getzixun();
			},
			tushutabchange(e) {
				this.tushutabcurrent = e
				let tushulist = this.tushulist
				this.tushuinfo = tushulist[e]
				console.log(this.tushuinfo)
				this.gettushu();
			},
			xuexitabchange(e) {
				this.xuexitabcurrent = e
				let xuexilist = this.xuexilist
				this.xuexiinfo = xuexilist[e]
				this.getxuexi();
			},
			tiyantabchange(e) {
				this.tiyantabcurrent = e
				let tiyanlist = this.tiyanlist
				this.tiyaninfo = tiyanlist[e]
				console.log(this.tiyaninfo)
				this.gettiyan();
			},
			getprohome() {
				this.navrouter("/pages/tabbar/ZhiboCenter"); //直播中心
			},
			async getshizi(){
				let res = await this.$u.api.getTeacherList({
					// cate_id:this.cate_id
				});
				this.shizidata = res
				console.log(this.shizidata)
			},
			swclick(e) {
				this.toPage(this.lunlist[e])
			},
			getToDetail(item, type) {
				if (type == 1) {
					//试听中心跳转
					if (item.button_type == 0 || item.button_type == 2) {
						//立即领取
						this.taninfo.image = item.wechat_image
						this.yueshow = true
					} else {
						this.toPage(item)
					}
				} else if (type == 2) {
					//学习
					this.toPage(item)
				} else if (type == 3) {
					//书籍
					this.toPage(item)
				} else if (type == 4) {
					//资讯
					console.log(item)
					this.toPage(item)
				}
			},
			getmore(type) {
				if (type == 1) {
					//更多试学
					this.navrouter("/pages/tabbar/ShiTingCenter?id=" + this.tiyaninfo.id); //直播中心
				} else if (type == 2) {
					//学习
					this.navrouter("/pages_subject/twoPage/StudPage/KeCheng?id=" + this.xuexiinfo.id + '&leitype=1'); //学习
				} else if (type == 3) {
					//书籍
					this.navrouter("/pages_subject/twoPage/StudPage/KeCheng?id=" + this.tushuinfo.id + '&leitype=2'); //图书中心
				} else if (type == 4) {
					//资讯
					this.navrouter("/pages/tabbar/ZiXunList?id=" + this.zixuninfo.id); //资讯列表
				}
			},
			async openLive(item) {
				// h5
				// #ifdef H5
				this.navrouter(`/pages_subject/live/index?id=${item.id}`);
				// #endif
				// #ifdef APP
				const res = await this.$u.api.getZhiboDetail({
					id: item.id,
				});
				loginLive("C907590113F5A48D9C33DC5901307461", "677D7D6D589120DA");
				// #endif
			},
			zhilistClick(item) {
				//点击直播列表
				if (item.button_type == 0) {
					//立即预约
					this.taninfo.image = item.yuyue_image
					this.yueshow = true
				} else if (item.button_type == 2) {
					//跳转直播回放
					this.openLive(item)
				} else if (item.button_type == 1) {
					//跳转正在直播
					this.openLive(item)
				}
			},
			async fgetFriendList(){
				let res = await this.$u.api.getFriendList({
				});
				this.helist = res
			},
			heClick(e){
				this.ishe = e

			},
			async fgetSiteList(){
				let res = await this.$u.api.getSiteList({
				});
				if(res){
					this.falist = res
					this.fainfo = res[0].list
					this.falistimg = this.fainfo[0].image
				}
				
			},
			swchangetwo(e) {
				console.log(e)
				let current = e.detail.current
				let fainfo = this.fainfo
				
				// this.fainfo = falist[current].list
				// console.log(this.fainfo)
				this.falistimg = fainfo[current].image
			},
			fatabchange(e) {
				this.fatabcurrent = e
				// let zixunlist = this.zixunlist
				// this.zixuninfo = zixunlist[e]
				// this.getzixun();
				let falist = this.falist
				this.fainfo = falist[e].list
				this.falistimg = this.fainfo[0].image
			},
			// async fgetMenuFoot(){
			// 	let res = await this.$u.api.getMenuFoot({
			// 	});
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.newcontent {
		min-height: 100vh;
		padding-bottom: 120rpx;
		background-color: #fff;

		.lun {
			margin: 20rpx 0 50rpx;
		}

		.plr {
			padding: 0 30rpx;
		}

		.ketan {
			// padding: 0 30rpx;
			// margin-bottom: 40rpx;
			margin-top: 10rpx;
		}

		.nbiao {
			display: flex;
			flex-direction: row;
			align-items: center;

			.zhiboicon {
				width: 38rpx;
				margin-right: 15rpx;
				height: 36rpx;
			}

			.ftit {
				font-family: PingFangSC;
				font-weight: 800;
				font-size: 38rpx;
				color: #111111;
			}
		}

		.nbtwo {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			margin: 49rpx 0 40rpx;

			.icons {
				width: 49rpx;
				height: 14rpx;

			}

			.zhitit {
				display: inline-block;
				font-family: PingFangSC;
				font-weight: 800;
				font-size: 34rpx;
				color: #333333;
				margin: 0 28rpx;
			}
		}

		.neitwo {
			margin-bottom: 30rpx;

			.swiper {
				// width: 50%;
				flex: 1;
				// margin: 0 20rpx;
				height: 437rpx;

				.swiperitem {
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;
					width: 360rpx !important;
					margin-right: 30rpx;
					height: 437rpx !important;

					// background: #000;
					// box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(216,216,216,0.35);
					// border-radius: 16rpx;
					.sview {
						width: 90%;
						height: 95%;
						display: flex;
						flex-direction: column;
						box-shadow: 0px 0px 12px 0px rgba(216, 216, 216, 0.35);
						border-radius: 8px;
						background-color: #fff;
						padding: 30rpx;
						position: relative;

						.rbiao {
							position: absolute;
							right: 0;
							top: 20rpx;
							width: 80rpx;
							height: 40rpx;
							display: flex;
							align-items: center;
							justify-content: center;

							.leis {
								position: absolute;
								width: 100%;
								height: 100%;
							}

							.rbview {
								position: relative;
								width: 100%;
								height: 100%;
								display: flex;
								align-items: center;
								justify-content: center;
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #FFFFFF;
								padding-top: 10rpx;
							}
						}

						.rbati {
							font-family: PingFangSC;
							font-weight: bold;
							font-size: 28rpx;
							color: #111111;
							display: block;
							margin: 30rpx 0 20rpx;
						}

						.sjian {
							width: 145rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #999999;
						}

						.lunone {
							display: flex;
							flex-direction: row;
							align-items: center;
							width: 100%;
							margin-bottom: 15rpx;

							.jtou {
								width: 66rpx;
								height: 66rpx;
								margin-right: 15rpx;
								border-radius: 50%;
							}

							.jiright {
								display: flex;
								flex-direction: column;

								.jiname {
									// max-width: 80%;
									display: inline-block;
									font-weight: 500;
									font-size: 24rpx;
									color: #111111;
								}

							}

						}

						.lunwen {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-top: auto;

							.hui {
								display: flex;
								align-items: center;
								justify-content: center;
								width: 130rpx;
								height: 52rpx;
								background: linear-gradient(-90deg, #FA4E4E, #FD894F);
								border-radius: 26rpx;
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #FFFFFF;
							}

							.mfei {
								margin-left: auto;
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #46C564;
							}
						}

						.iosheight {
							height: 196rpx;
						}

					}
				}

				.cetit {
					font-size: 20px;
					font-weight: 500;
					display: block;
					margin-bottom: 20rpx;
					color: rgba(255, 255, 255, 1);
					font-family: "Tangerine" !important;
				}
			}

			.xians {
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.swiper-item {
				position: relative;

				.jiaobg {
					position: absolute;
					width: 100%;
					height: 100%;
				}
			}

			.twoimg {
				transform: rotate(180deg);
			}
		}

		.cahzhibo {
			height: 80rpx;
			border-radius: 10rpx;
			border: 1px solid #EEEEEE;
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-family: PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #999999;
		}

		.tabview {
			border-bottom: 1rpx solid #eee;

		}

		.tilist {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 35rpx;

			.tiitem {
				width: 48%;
				display: flex;
				flex-direction: column;
				margin-bottom: 40rpx;
				background: #FFFFFF;
				border-radius: 26rpx;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 205, 217, 0.3);

				.itemimg {
					width: 100%;
					height: 200rpx;
					border-radius: 26rpx;
				}

				.itembot {
					padding: 25rpx 20rpx;

				}

				.tbiao {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
					display: block;
					margin-bottom: 15rpx;

				}

				.timiao {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}

				.linview {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 25rpx;

					.liji {
						padding: 15rpx 20rpx;
						background: #FFF0F0;
						border-radius: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #FA4E4E;
					}

					.mian {
						margin-left: auto;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #46C564;
					}
				}

			}

			.tiitem:nth-child(even) {
				margin-left: auto;
			}
		}

		.tilist-xue {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 35rpx;

			.tiitem {
				width: 48%;
				display: flex;
				flex-direction: column;
				margin-bottom: 40rpx;
				background: #FFFFFF;
				border-radius: 10rpx;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 205, 217, 0.3);

				.itemimg {
					width: 100%;
					height: 200rpx;
					border-radius: 10rpx 10rpx 0 0;
				}

				.itembot {
					padding: 25rpx 20rpx;

				}

				.tbiao {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #111111;
					display: block;
					margin-bottom: 15rpx;

				}

				.timiao {
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 22rpx;
					color: #999999;
				}

				.linview {
					display: flex;
					flex-direction: row;
					align-items: center;
					margin-top: 30rpx;

					.liji {
						padding: 15rpx 20rpx;
						background: #FFF0F0;
						border-radius: 26rpx;
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 22rpx;
						color: #FA4E4E;
					}

					.mian {
						margin-left: auto;
						font-weight: 500;
						font-size: 20rpx;
						color: #CCCCCC;
					}

					.jine {
						font-family: DIN;
						font-weight: bold;
						font-size: 20rpx;
						color: #FA4E4E;

						.jinnum {
							font-size: 32rpx;
						}
					}
				}

			}

			.tiitem:nth-child(even) {
				margin-left: auto;
			}
		}

		.tilist-jiaocai {
			margin-top: 40rpx;

			.tiitem-two {
				display: flex;
				flex-direction: row;
				background: #FFFFFF;
				border-radius: 10rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;

				.itemimg {
					width: 260rpx;
					height: 160rpx;
					background: #F8F8F8;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.itembot {
					flex: 1;
					display: flex;
					flex-direction: column;

					.tbiao {
						max-width: 100%;
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
						display: inline-block;
					}

					.timiao {
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						display: inline-block;
						margin-top: 20rpx;
					}

					.linview {
						display: flex;
						margin-top: auto;
						flex-direction: row;
						align-items: center;

						.jine {
							font-family: DIN;
							font-weight: bold;
							font-size: 20rpx;
							color: #FA4E4E;

							.jinnum {
								font-size: 32rpx;
							}

						}

						.mian {
							margin-left: auto;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 22rpx;
							color: #46C564;
						}
					}
				}
			}
		}

		.kaoview {
			width: 94%;
			height: 80rpx;
			background: #F8F8F8;
			border-radius: 40rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			margin: 40rpx auto 0;

			.kaoleft {
				width: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 28rpx;
				color: #CCCCCC;
				height: 100%;
			}

			.kactive {
				background: linear-gradient(-90deg, #FA4E4E, #FD894F);
				border-radius: 40rpx;
				font-family: PingFangSC;
				font-weight: bold;
				font-size: 28rpx;
				color: #FFFFFF;
			}
		}

		.tilist-kao {
			margin-top: 40rpx;

			.kaoitem {
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 205, 217, 0.3);
				padding: 20rpx;
				display: flex;
				flex-direction: row;
				margin-bottom: 30rpx;
				align-items: center;

				.itemimg {
					width: 230rpx;
					height: 150rpx;
					margin-left: auto;
					border-radius: 20rpx;
				}

				.kaoleft {
					flex: 1;
					display: flex;
					flex-direction: column;
					margin-right: 20rpx;

					.kaotit {
						font-family: PingFang SC;
						font-weight: 500;
						font-size: 28rpx;
						color: #111111;
					}

					.kaobot {
						margin-top: 50rpx;
						display: flex;
						flex-direction: row;
						align-items: center;

						.kaoqi {
							display: flex;
							flex-direction: row;
							align-items: center;
							margin-right: 40rpx;

							.ticon {
								width: 18rpx;
								height: 18rpx;
								margin-right: 10rpx;
							}

							.sjians {
								font-family: PingFang SC;
								font-weight: 500;
								font-size: 22rpx;
								color: #999999;
							}
						}
					}
				}
			}
		}

		.xie {
			margin: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;

			text {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 36rpx;
				color: #333333;
				text-align: center;
			}
		}

		.pinlist {
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;

			.pinitem {
				width: 31%;
				height: 120rpx;
				background-color: #fff;
				padding: 30rpx;
				margin: 0 15rpx 15rpx 0;
				box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202, 205, 217, 0.26);
				border-radius: 4rpx;

				.Kaplan_logo {
					width: 150rpx;

				}
			}
		}

		.shiliview {
			margin-top: 30rpx;

			.swiper-block-shili {
				height: 840rpx;
				width: 100%;

				.swiper-item-shili {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: flex-start;
					overflow: unset;
					position: relative;

					.skaoview {
						background: #FFFFFF;
						box-shadow: 0rpx 0rpx 40rpx 0rpx rgba(202, 205, 217, 0.4);
						border-radius: 10rpx;
						border: 1px solid #EEEEEE;
						position: relative;

						.kaooneimg {
							height: 400rpx;
							position: relative;
							width: 100%;
						}

						.jinpai {
							padding: 30rpx;
							display: flex;
							flex-direction: column;
							
							.duiview{
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-bottom: 10rpx;
								// margin-top: 30rpx;
								text{
									font-weight: 500;
									font-size: 24rpx;
									color: #333333;
								}
							}

							.jinname {
								font-family: PingFangSC;
								font-weight: bold;
								font-size: 32rpx;
								color: #111111;
								display: block;
								margin-bottom: 15rpx;
							}

							.bqian {
								display: flex;
								flex-direction: row;
								margin-bottom: 20rpx;

								.qianitem {
									padding: 6rpx 10rpx;
									background: #FEF6F2;
									border-radius: 4rpx;
									border: 1px solid #FFDDCC;
									font-family: PingFang SC;
									font-weight: 500;
									font-size: 22rpx;
									color: #FA7938;
									display: inline-block;
									margin-right: 10rpx;
								}
							}
						}
					}

					.slide-image {
						height: 690rpx;
						width: 500rpx;
						border-radius: 9rpx;
						box-shadow: 0px 0px 30rpx rgba(0, 0, 0, 0.2);
						margin: 0rpx 40rpx;
						z-index: 1;
					}

					.active {
						transform: scale(1.14);
						transition: all 0.2s ease-in 0s;
						z-index: 20;
					}
				}
			}

		}
	}

	.yin {
		background: #F6F7FB !important;
		padding: 30rpx !important;
	}

	.st {
		/deep/.u-mode-center-box {
			background-color: transparent;
		}

		.stpop {
			background-color: #fff;
			height: 550rpx;
			background: #FFFFFF;
			border-radius: 30rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: relative;

			.mapop {
				width: 300rpx;
				height: 300rpx;
				margin-bottom: 50rpx;
			}

			.matit {
				font-family: PingFang SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #FA7938;
			}

			.chaview {
				position: absolute;
				right: 0rpx;
				top: 0rpx;
				width: 40rpx;
				height: 40rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(202, 205, 217, 0.4);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;

				// position: relative;
				.macha {
					width: 30rpx;
					height: 30rpx;
				}
			}
		}
	}
	.flei{
		/deep/uni-swiper {
			height: 165px;
		}
	}
	.faview{
		.fatu{

			.faitem{
				position: relative;
				width: 100%;
				height: 640rpx;
			}

			.fatuimg{
				width: 100%;
				height: 100%;
				position: absolute;

			}
			.fabot{
				margin-top: auto;
				display: flex;
				height: 100%;
				align-items: flex-end;
				padding-bottom: 21px;
				/deep/uni-swiper .uni-swiper-slide-frame {
					left: 43px;
				}
				.swiper {
					// width: 50%;
					flex: 1;
					justify-content: center;
					// margin: 0 20rpx;
					height: 200rpx;

					.swiperitem {
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;
						width: 80% !important;
						// margin-right: 30rpx;
						height: 200rpx !important;
						border-radius: 10rpx;
						.sview {
							width: 100%;
							height: 100%;
							display: flex;
							// flex-direction: column;
							// box-shadow: 0px 0px 12px 0px rgba(216, 216, 216, 0.35);
							// border-radius: 8px;
							background-color: #fff;
							padding: 30rpx 45rpx;
							position: relative;
							margin-right: 30rpx;
							// height: 198rpx;
							background: #FFFFFF;
							box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(202,205,217,0.3);
							border-radius: 10rpx;
							flex-direction: column;
							.bname{
								font-family: PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #111111;
								margin-bottom: 30rpx;
							}
							.ditem{
								display: flex;
								flex-direction: row;
								align-items: center;
								margin-bottom: 10rpx;
								.dicon{
									width: 20rpx;
									height: 24rpx;
									margin-right: 10rpx;
								}
								.tdizhi{
									font-weight: 400;
									font-size: 24rpx;
									color: #999999;
								}

							}

						}
					}

					.cetit {
						font-size: 20px;
						font-weight: 500;
						display: block;
						margin-bottom: 20rpx;
						color: rgba(255, 255, 255, 1);
						font-family: "Tangerine" !important;
					}
				}
			}
		}
	}
	
</style>